<template>
    <!--完善信息-->
    <div>
        <div class="app-wrap">
            <div class="pay-check-investment mt-20">
                <dl class="sub-list">
                    <dd style="border-top: none; margin-top: 0; padding-top: 0;">
                        <div class="title">
                            <span class="c">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dingtou"></use>
                                </svg>
                            </span>
                            <span class="t">{{productSaleInfo.prodName}}</span>
                        </div>
                        <div class="content">
                            <div class="l">
                                <div class="orange">{{productSaleInfo.prodRate}}</div>
                                <div class="gray">收益率</div>
                            </div>
                            <div class="m">
                                <div class="b">{{productSaleInfo.prodTerm}}个月</div>
                                <div class="gray">产品期限</div>
                            </div>
                            <div class="r">
                                <div class="b">{{productSaleInfo.prodBuyMinmonye}}元起购</div>
                                <div>{{productSaleInfo.prodRaiseLimit}}万募集上限</div>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="withdrawal-pop-up">    
            <div class="withdrawal-content pb-100">        
                <div class="title">
                    <span class="t">投资金额</span>
                    <div class="r">当前活期余额 <span class="orange">{{productSaleInfo.balanceMoney}}</span>元</div>
                </div>
                <div class="input-content">
                    <div class="title">¥</div>
                    <div class="input-box">
                        <input v-model="amount" type="tel" v-bind:placeholder="purchase(productSaleInfo.prodBuyMinmonye)">
                        <div v-if="amount != ''" @click="amount = ''" class="clear-input">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-guanbi"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                <a v-if="btnState == 3" class="btn btn-blue mt-30" href="javascript:void(0)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dui1"></use>
                    </svg>
                    投资成功
                </a>
                <a v-if="btnState == 2" class="btn btn-blue mt-30" href="javascript:void(0)">
                    <svg class="icon rotate" aria-hidden="true">
                        <use xlink:href="#icon-jiazai1"></use>
                    </svg>
                    正在投资
                </a>
                <a v-if="btnState == 1" @click="topUp" class="btn btn-blue mt-30" href="javascript:void(0);">确定</a>
            </div>   
            <div class="withdrawal-bg"></div>
        </div>
    </div>
    
    
</template>

<script>
    import $ from 'jquery'
    import fastClick from '@/assets/aip/js/fastclick'
    import AIP from '@/util/aip'
    import util from '@/util/util'
    import { Toast, MessageBox } from 'mint-ui'
    import {mapGetters} from 'vuex';
    import {encrypt} from '@/util/encryptPassword'
    export default {
        name: "investment",
        data(){
            return {
                productSaleInfo: '',
                prodId: this.$route.params.id,
                amount: '',
                passWord: '',
                btnState: 1
            }
        },
        methods:{
            productSale(){
                util.axiosPost('/eebpc/buy/productSale', {
                    prodId: this.prodId
                })
                .then(res => {
                    console.log(res)
                    this.productSaleInfo = res.data
                })
            },
            
            topUp(){
                var exp = /^([1-9][\d]{0,9}|0)(\.[\d]{1,2})?$/;
                if(exp.test(this.amount)){
                    if(this.amount < this.productSaleInfo.prodBuyMinmonye){
                        Toast({
                            message:'金额小于起购金额!'
                        });
                    }
                    else if(this.amount > this.productSaleInfo.prodRaiseLimit || Number(this.amount) > util.toNumber(this.productSaleInfo.balanceMoney)){
                       if(this.amount > util.toNumber(this.productSaleInfo.balanceMoney)){
                            Toast({
                                message:'余额小于购买产品金额!'
                            });
                        }
                        else{
                            Toast({
                                message:'金额大于募集上限!'
                            });
                        }
                    }
                    else{
                        AIP.addKeyboardPayPassword(this.amount, {callback:this.getV, forgot:this.getF})
                    }
                }
                else{
                    Toast({
                        message:'金额无效!'
                    });
                }
            },
            getV(){
                this.btnState = 2
                this.passWord = encrypt($("#passWordInput").val(),this.key);
                util.axiosPost('/eebpc/buy/productSaleSubimt2', 
                    {
                        prodId: this.productSaleInfo.prodId,
                        money: this.amount,
                        password: this.passWord
                    }
                )
                .then( response => {
                    console.log(this.amount);
                    console.log(this.passWord);
                    console.log(response);
                    console.log('1');
                    if(response.data.state == 0){
                        console.log('--成功--')
                        this.btnState = 3
                        // MessageBox.alert('投资成功!','提示').then(action => {
                        //     this.$router.push({path:'/investRegularly'});
                        // });
                        setTimeout(()=>{
                            this.$router.push({path:'/investRegularly'});
                        }, 3000)
                    }
                    else if(response.errorMsg){
                        console.log('--报错--')
                        this.btnState = 1
                        Toast({
                            message: response.errorMsg
                        });
                    }
                    else{
                        console.log('--异常--')
                        this.btnState = 1
                        Toast({
                            message: '异常'
                        });
                    }
                })
                .catch( err => {
                    console.log('--catch--')
                    console.log(err);
                    this.amount = ''
                    this.btnState = 1
                });
            },
            getF(){
                Toast({
                    message:'找回密码!'
                });
                // this.$router.push({path:'/'});
            },
            whetherSigned(){
                util.axiosPost('/eebpc/agreePay/queryAgree')
                .then( res => {
                    console.log(res);
                    if(res.data.exits != 1){
                        this.$router.push({path:'/perfectInfor'});
                    }
                })
                .catch( err => {
                    console.log(err);
                });
            },
            purchase(num){
                return num + "元起投"
            }
            
        },
        created(){
            this.whetherSigned()
            this.$store.dispatch('getKey',{});
            this.productSale()
            // fastClick.attach(document.body);
        },
        mounted(){
            
        },
        computed:{
            ...mapGetters({
                key:'getKey'
            })
        }
    }
</script>

<style scoped>
</style>
